<template>
	<div class="stadard-head">
		<div class="head-conter">
			<div class="head-csp">
				<img class="head-csp_logo" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-16/63edd0e0c16213cd7deca53c.png" />
				<div class="head-csp_rig">
					<ul class="head-csp_ul">
						<li class="head-csp_li" v-for="(nItem,nIndex) in viewModel" :key="nIndex">
							<div class="head-csp_st1" :class="{'head-csp_st2': currentIndex == nItem.url}" @click="tagChange(nItem,nIndex)">{{nItem.name}}</div>
							<div class="drop-down" v-if="nItem.childrens.length!=0">
								<div class="drop-down_txt" v-for="(dItem,dIndex) in nItem.childrens" :key="dIndex" @click.stop="tagChange(dItem,dIndex)">{{dItem.name}}</div>
							</div>
						</li>
					</ul>
					<div class="csp_rig-ht">
						<div class="csp_rig-mbile">151-1230-5133</div>
						<div class="csp_rig-khed" @click="referenceTab">
							<img class="csp_rig-kig" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-08/63e33a7b441ef48fa6008d0b.png" />
							<div class="csp_rig-kxt">在线咨询</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style=" height: 6.8vw;"></div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: [{
					name: '首页',
					url: '/web/standard/index',
					childrens: []
				}, {
					name: '关于领英',
					url: '/web/standard/about',
					childrens: []
				}, {
					name: '解决方案&服务',
					url: '/web/standard/serve',
					childrens: []
				}, {
					name: '客户&案例',
					url: '/web/standard/case',
					childrens: []
				}, {
					name: '联系我们',
					url: '/web/standard/relation',
					childrens: []
				}],
				currentIndex: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var valueObjec = this.$route
				this.currentIndex = valueObjec.matched[1].path
			},
			tagChange(data, vIndex, tIndex) {
				if (data.url) {
					this.currentIndex = data.url
				} else {
					this.currentIndex = data.name
				}
				this.$router.push(data.url)
				document.body.scrollTop = document.documentElement.scrollTop = 0
				var this_ = this
				this.$nextTick(() => {
					setTimeout(() => {
						this_.$bus.$emit('standard_init_change')
					}, 50)
				})
			},
			referenceTab() {
				window.open('https://plt.zoosnet.net/LR/Chatpre.aspx?id=PLT69767722&lng=cn')
			}
		},
		watch: {
			'$route': {
				deep: true,
				handler() {
					this.init()
				}
			}
		}
	}
</script>
<style lang="scss">
	div,
	li {
		font-family: 'SourceHanSansCN-Regular';
	}

	.stadard-head {
		.head-conter {
			height: 6.8vw;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
		}

		.head-csp {
			width: 92vw;
			margin: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 1vw;
			box-sizing: border-box;

			.head-csp_logo {
				height: 5.5vw;
			}

			.head-csp_rig {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.head-csp_ul {
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.head-csp_li {
					height: 100%;
					line-height: 5.568vw;
					padding: 0 1.392vw;
					cursor: pointer;
					position: relative;

					.head-csp_st1 {
						font-size: 1vw;
						color: #333;
						font-weight: 500;
					}

					.head-csp_st2 {
						color: #e60012;
					}

					.drop-down {
						display: none;
						position: absolute;
						top: 78px;
						left: 0;
						z-index: 11;
						width: 100%;
						background-color: rgba(#ffffff, 0.9);
						border-radius: 6px;
						padding: 10px 0;

						.drop-down_txt {
							font-size: 15px;
							color: #333;
							cursor: pointer;
							padding: 15px 0;
							text-align: center;
							line-height: 1;

							&:hover {
								color: #e60012;
							}
						}
					}

					&:hover {
						.drop-down {
							display: block;
						}

						.head-csp_st1 {
							color: #e60012;
						}
					}
				}
			}

			.csp_rig-ht {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 5.5vw;

				.csp_rig-mbile {
					font-size: 1.5vw;
					color: #e60012;
				}

				.csp_rig-khed {
					display: flex;
					flex-direction: row;
					align-items: center;
					background-color: #e60012;
					padding: 0.4vw 1.2vw;
					cursor: pointer;
					margin-left: 5px;

					.csp_rig-kig {
						height: 0.8vw;
					}

					.csp_rig-kxt {
						font-size: 0.8vw;
						color: #fff;
						margin-left: 0.4176vw;
					}
				}
			}
		}
	}
</style>